<template>
  <el-table
    stripe
    v-loading="loading"
    :data="currentTableData"
    element-loading-text="loading"
    :border="true"
    highlight-current-row
    header-row-class-name="common-table-header"
    :span-method="objectSpanMethod"
    :row-key="key"
    v-bind="$attrs"
  >
    <el-table-column
      v-for="(column, index) in tableHeader"
      :key="index"
      :prop="column.prop"
      :align="'center'"
      :type="column.type"
      :label="column.label"
      :width="column?.width"
      :min-width="column.minWidth"
      :formatter="column?.formatter"
      :sortable="column?.sortable"
      :sort-by="column.prop"
      :sort-method="column?.sortMethod"
    >
      <template #default="scope">
        <div v-if="column.btn">
            <el-button v-for="(k,index) in column.btn" :key="index" :type="k.type" text size="small"
						@click="k.func(scope.$index, scope.row)">{{k.name}}</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="page-container">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      :small="false"
      :default-page-size="10"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults'
import { ref, watch } from 'vue';
import { PAGE_SIZES } from '../../constant';
interface TableProps {
  tableData: any[];
  tableHeader: any[];
  key: number|string; // 唯一标识
  loading?: boolean;
  spanId?: string | number;
}
interface SpanMethodProps {
  row: TableProps
  column: TableColumnCtx<TableProps>
  rowIndex: number
  columnIndex: number
}
const props = withDefaults(defineProps<TableProps>(), {
  tableData: () => [],
  tableHeader: () => [],
  loading: false,
  key:'',
  spanId: 'rowId'
});

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  console.log(row, column);
  // 计算，更具合并id，找出相同id的进行设置data的rowspan的
  // if (columnIndex === 0) {
  //   if (rowIndex % 2 === 0) {
  //     return {
  //       rowspan: 2,
  //       colspan: 1,
  //     }
  //   } else {
  //     return {
  //       rowspan: 0,
  //       colspan: 0,
  //     }
  //   }
  // }
}

const flex = ref('end')
// 分页
let total = ref(0)
let pageSize = ref(10)
let pageSizes = PAGE_SIZES
let currentPage = ref(1)
let background = ref(true)
const handleSizeChange = (size:number)=>{
  handleDataPage(props.tableData)
}
const handleCurrentChange=(current:number)=>{
  handleDataPage(props.tableData)
}
let currentTableData = ref<any[]>([])

watch(
  () => props.tableData,
  (newValue, oldValue) => {
    total.value = newValue.length
    handleDataPage(newValue)
  },
  { deep: true }
)
// 处理数据分页
const handleDataPage=(data:any[])=>{
  let begin = (currentPage.value - 1) * pageSize.value;
  let end = currentPage.value * pageSize.value;
  currentTableData.value = data.slice(begin,end)
}

</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  height: 45px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: v-bind(flex);
}
</style>
